<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<style type="text/css">
			#list {
				/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
				margin-top: -1px;
			}
			
			#pullrefresh {
				height: 100%;
			}
		</style>
	</head>

	<body>
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<ul class="mui-table-view mui-table-view-chevron">
				</ul>
			</div>
		</div>
		<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			var page = 0;
			var pageSize = 15;
			var titleLength = 20;
			var flag = false;
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '别着急,兽总正在准备数据...',
						callback: pullupRefresh
					}
				}
			});

			function pulldownRefresh() {
				location.reload();
			}

			function pullupRefresh() {
				setTimeout(function() {
					load(++page, pageSize, titleLength);
					mui('#pullrefresh').pullRefresh().endPullupToRefresh(flag);
				}, 100);
			}
			mui.plusReady(function() {
				mui('.mui-table-view-chevron').on('tap', '.mui-table-view-cell', function(e) {
					mui.openWindow({
						url: "pages/detail.html?id=" + $(this).data('id'),
						id: "detail",
						show: {
							aniShow: 'zoom-fade-out',
							duration: 300
						}
					});
				});
			});
			mui.plusReady(function() {
				//读取本地存储，检查是否为首次启动
				var showGuide = plus.storage.getItem("lauchFlag");
				if (showGuide) {
					//有值，说明已经显示过了，无需显示；
					//关闭splash页面；
					plus.navigator.closeSplashscreen();
					plus.navigator.setFullscreen(false);
				} else {
					//显示启动导航
					mui.openWindow({
						id: 'guide',
						url: 'pages/guide.html',
						show: {
							aniShow: 'none'
						},
						waiting: {
							autoShow: false
						}
					});
				}
			});

			function load(page, pageSize, titleLength) {
				mui.get('https://nutz.cn/yvr/api/v1/topics', {
					page: page,
					limit: pageSize
				}, function(data) {
					if (data.data.length <= 0) {
						flag = true;
					}
					$.each(data.data, function(i, item) {
						var html1 = '<li class="mui-table-view-cell mui-media"><a href="pages/detail.html?id=' + item.id + '"><img class="mui-media-object mui-pull-left" src="' + item.author.avatar_url + '"><div class="mui-media-body"><div class="mui-ellipsis"><sup style="color: red;">' + (item.top ? '顶' : '') + '</sup> <sup style="color: green;">' + (item.good ? '荐' : '') + '</sup> ' + item.title + '</div><p class="mui-ellipsis mui-pull-right">作者: ' + item.author.loginname + ' 浏览: ' + item.visit_count + ' 回复: ' + item.reply_count + '</p></div></a></li>';
						var html = '<li class="mui-table-view-cell mui-media" data-id="' + item.id + '"><a class="mui-navigate-right"><img class="mui-media-object mui-pull-left" src="' + item.author.avatar_url + '"><div class="mui-media-body"><div class="mui-ellipsis"><sup style="color: red;">' + (item.top ? '顶' : '') + '</sup> <sup style="color: green;">' + (item.good ? '荐' : '') + '</sup> ' + item.title + '</div><p class="mui-ellipsis mui-pull-right">作者: ' + item.author.loginname + ' 浏览: ' + item.visit_count + ' 回复: ' + item.reply_count + '</p></div></a></li>';
						$('.mui-table-view').append(html);
					});
				}, 'json');
			}
			if (mui.os.plus) {
				mui.plusReady(function() {
					setTimeout(function() {
						mui('#pullrefresh').pullRefresh().pullupLoading();
					}, 80);
				});
			} else {
				mui.ready(function() {
					mui('#pullrefresh').pullRefresh().pullupLoading();
				});
			}
		</script>
	</body>

</html>